<template>
    <section :style="{background: isComponent ?'#fff':'#ECF0F5',paddingTop:isComponent? '0':'20px'}">
        <div class="section-content pb-top clearfix">
            <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
                <el-form :inline="true" :model="filters">

                    <el-form-item v-if="!isComponent">
                        <el-select v-model="filters.deviceId" filterable  placeholder="设备名称(SN)" @change="getLogs()">
                            <el-option  key="" label="所有" value=" "></el-option>
                            <el-option v-for="item in devicelist" :key="item.deviceId" :label="item.name+'('+item.deviceSn+')'" :value="item.deviceId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                   
                    <el-form-item>
                        <el-date-picker v-model="value4" @change="second1()" type="datetimerange" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions2">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button :type="buttonColor" v-on:click="getLogs">查询</el-button>
                    </el-form-item>

                </el-form>
            </el-col>
            <!--列表-->
            <el-table :data="query" highlight-current-row :header-row-style="{backgroundColor: titleColor}" v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
                <el-table-column type="index" align="center" label="序号" width="80" :index="indexMethod">
                </el-table-column>   
                <el-table-column prop="createTime" align="center" label="时间">
                </el-table-column>
                <el-table-column prop="actionUserName" align="center" label="用户">
                </el-table-column>
                <el-table-column prop="deviceName" align="center" label="设备名称">
                </el-table-column>
                <el-table-column prop="deviceSn" align="center" label="网关SN">
                </el-table-column>
                <el-table-column prop="actionText" align="center" label="操作内容" width='400'>
                </el-table-column>
            </el-table>

            <!--工具条-->
            <el-col :span="24" class="toolbar">
                <!-- <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button> -->
                <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="50" :total="total"
                    style="float:right;">
                </el-pagination>
            </el-col>
        </div>
    </section>
</template>

<script>
import {
    user_event_query,
    device_query_mini
} from "../../api/api"
export default{
    props:{
        isComponent:{//判断当前页面是否被作为组件使用
            type: Boolean,
            default: false
        },
        componentDeviceId:{
            type: String,
        }
    },
    data(){
        return{
            listLoading:false,
            page:1,
            total: 0,
            query:[],
            filters:{
                deviceId:'',
                startTime: '',
				endTime: '',
            },
            devicelist:'',
            value4: [new Date().getTime() - 3600 * 1000 * 24 * 1, new Date()],
            pickerOptions2: {
                    shortcuts: [{
                        text: '最近1小时',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 1);
                            picker.$emit('pick', [start, end]);
                        }
                    },{
                        text: '最近24小时',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
        }
    },
    computed:{
            buttonColor(){
                return this.$store.state.buttonColor
            },
            titleColor(){
                return this.$store.state.titleColor
            },
            dialogTitleColor(){
                return this.$store.state.dialogTitleColor
            },
        },
    methods:{
        indexMethod(index) {
                let num = (this.page - 1) * 50 + index + 1;
                return num;
            },
        getLogs(){
            console.log(this.value4)
            let para = {
                pageNo: this.page,
                pageSize: 50,
                deviceId:this.filters.deviceId,
                startTime: this.filters.startTime,
				endTime: this.filters.endTime
            }
            user_event_query(para).then((res) => {
                console.log(res)
                this.query = res.data.list
                this.total = res.data.totalCount;
                console.log(this.query)
            })
        },
        selsChange: function (sels) {
            this.sels = sels;
        },
        handleCurrentChange(val) {
            this.page = val;
            this.getLogs();
        },
        getdata(date) {
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            m = m < 10 ? ('0' + m) : m;
            var d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            var h = date.getHours();
            h = h < 10 ? ('0' + h) : h;
            var minute = date.getMinutes();
            minute = minute < 10 ? ('0' + minute) : minute;
            var second = date.getSeconds();
            second = second < 10 ? ('0' + second) : second;
            return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
        },
        second1() {
            this.filters.startTime = this.getdata(this.value4[0]);
            this.filters.endTime = this.getdata(this.value4[1]);
        },
    },
    mounted(){
        if(this.componentDeviceId){
            this.filters.deviceId = this.componentDeviceId
        }
         this.getLogs()
         let para = {
                pageNo: this.page,
                pageSize: 9999,
                miniLev:2

            };
            
            device_query_mini(para).then((res) => {
                this.begCode(res.code,res.message);
                this.devicelist = res.data.list;
                
            });
    }
}
</script>

<style>

</style>